import React from 'react'
import $ from 'jquery'

import View from 'lib/View.jsx'
import Card from 'lib/components/card.jsx'
import GridWidget from 'lib/components/GridWidget.jsx'
import dispatcher from 'lib/dispatcher'
import format from 'lib/util/format'
import Tab from 'lib/components/tab.jsx'
import DefaultNoDataElement from 'lib/util/defaultNoDataElement.jsx'

import RootScope from './RootScope.es6'
import { colsForCrashlog, colsForWebview, colsForANR } from './imsiCrashCols.jsx'

export default class RootView extends View{
  constructor(props) {
    super(props);
    this.switchTab = this.switchTab.bind(this);
  } // constructor

  switchTab(ind, key) {
    // let basePath = this.props.location.pathname.split('/').slice(0, 3);
    let basePath = this.props.location.pathname.split('/').slice(0, 4);
    this.props.history.pushState(null, basePath.join('/')+'/'+ind);
    // dispatcher.dispatch({
    //   $type:'switch_tab',
    //   index:ind,
    //   key:key
    // })
  } // switchTab

  webviewModuleChangeHandler(module_name) {
    dispatcher.dispatch({
      $type:'change_webview_module',
      module_name
    })
  } // webviewModuleChangeHandler

  render(){
    return (
      <div className="pure-g">
        <div className="pure-u-1">
          <Tab onAfterChange={this.switchTab} tabActive={this.state.currentTab} >
            <Tab.Panel title="崩溃轨迹" key="crashlog">
              <Card>
                <GridWidget store={this.state.grid_crashlog} cols={colsForCrashlog} nodataElement={<DefaultNoDataElement content="无崩溃信息记录" />}/>
              </Card>
            </Tab.Panel>
            <Tab.Panel title="Webview异常" key="webview">
              <div className="type-selector">
                <label>
                  <input
                    type="radio"
                    name="webview-group"
                    value="1"
                    defaultChecked={ this.state.webview_module === 'jsError' }
                    onChange={ this.webviewModuleChangeHandler.bind(this, 'jsError') } />
                  js错误
                </label>
                {this.state.hasAjax ?
                  <label>
                    <input
                      type="radio"
                      name="webview-group"
                      value="2"
                      defaultChecked={ this.state.webview_module === 'ajaxError' }
                      onChange={ this.webviewModuleChangeHandler.bind(this, 'ajaxError') } />
                    Ajax错误
                  </label>:null
                }
                {this.state.hasAjax ?
                  <label>
                    <input
                      type="radio"
                      name="webview-group"
                      value="3"
                      defaultChecked={ this.state.webview_module === 'ajaxTrace' }
                      onChange={ this.webviewModuleChangeHandler.bind(this, 'ajaxTrace') } />
                    Ajax慢请求
                  </label>:null
                }
              </div>
              <Card>
                <GridWidget store={this.state.grid_webview} cols={colsForWebview} nodataElement={<DefaultNoDataElement content="无Webview异常信息记录" />}/>
              </Card>
            </Tab.Panel>
            {/*<Tab.Panel title="ANR" key="anr">
              <Card>
                <GridWidget store={this.state.grid_anr} cols={colsForANR} nodataElement={<DefaultNoDataElement content="无崩溃信息记录" />}/>
              </Card>
            </Tab.Panel>*/}
          </Tab>
        </div>
      </div>
    )
  }
}
RootView.defaultProps = {
  Scope:RootScope
}
